<template>
  <div class="logic-flow-view">
    <template v-if="lf">
      <!-- 辅助工具栏 -->
      <Control class="demo-control" :lf="lf" @catData="$getGraphData" :disabled="disabled">
        <slot name="btn"></slot>
      </Control>

      <template v-if="!disabled">
        <!-- 拖拽节点面板 -->
        <NodePanel :nodeArr="nodeArr" @dragNode="dragNode"></NodePanel>
      </template>
    </template>

    <!-- 画布 -->
    <div id="LF-view" ref="container"></div>
    <!-- 用户节点自定义操作面板 -->
    <AddPanel
      v-if="showAddPanel"
      class="add-panel"
      :style="addPanelStyle"
      :lf="lf"
      :nodeData="addClickNode"
      @addNodeFinish="hideAddPanel"
    >
    </AddPanel>
    <!-- 属性面板 -->
    <el-dialog
      title="节点配置"
      :visible.sync="dialogVisible"
      width="800"
      :before-close="() => (dialogVisible = false)"
      :draggable="true"
      :close-on-click-modal="true"
    >
      <PropertyDialog
        v-if="dialogVisible"
        :nodeData="clickNode"
        :lf="lf"
        @setPropertiesFinish="() => (dialogVisible = false)"
      ></PropertyDialog>
    </el-dialog>
    <!-- 数据查看面板 -->
    <el-dialog title="数据" width="50%" :visible.sync="dataVisible" align-center>
      <DataDialog :graphData="graphData"></DataDialog>
    </el-dialog>
  </div>
</template>
<script>
import NodePanel from './LFComponents/NodePanel.vue'
import AddPanel from './LFComponents/AddPanel.vue'
import Control from './LFComponents/Control.vue'
import PropertyDialog from './PropertySetting/PropertyDialog.vue'
import DataDialog from './LFComponents/DataDialog.vue'

import MyLogicFlow from './MyLogicFlow'
import registerNodes from './registerNode/index.js' // 注册自定义节点
import FlowLink from './registerEdges/FlowLink.js'

// import { defaultNodeArr } from './config'
// import { nodesList } from './mockNodes.js'

// import { mockData0, mockData } from './mockdata.js'

export default {
  name: 'LF',
  components: { NodePanel, AddPanel, Control, PropertyDialog, DataDialog },
  props: {
    disabled: { type: Boolean, default: false },
    nodesArr: { type: Array, default: () => [] },
  },
  watch: {
    nodesArr: {
      handler(val) {
        this.nodeArr = val
      },
      // deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // nodeArr: [...defaultNodeArr, { groupTitle: '自定义扩展', nodesList }],
      nodeArr: [...this.nodesArr],

      lf: null,
      showAddPanel: false,
      addPanelStyle: { top: 0, left: 0 },
      nodeData: null,
      addClickNode: null,
      clickNode: null,
      dialogVisible: false,
      graphData: null,
      dataVisible: false,

      moveData: {},
    }
  },
  mounted() {
    // this.$_initLf()
  },
  methods: {
    $_initLf() {
      const logicFlowInst = new MyLogicFlow({ el: this.$refs.container })
      this.lf = logicFlowInst.lf

      if (this.disabled) {
        // 配置 静默模式 只能查看
        this.lf.updateEditConfig({
          isSilentMode: true,
          adjustEdge: false,
        })
        // 配置 静默模式 取消右键菜单
        this.lf.extension.menu.setMenuConfig({
          nodeMenu: false, // 删除默认的节点右键菜单
          // 或者自定义
          // nodeMenu: [
          //   // {
          //   //   text: "删除",
          //   //   callback(node) {
          //   //     lf.deleteNode(node.id);
          //   //   },
          //   // },
          // ], // 覆盖默认的节点右键菜单
          edgeMenu: false, // 删除默认的边右键菜单
          graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
        })
      } else {
        this.lf.extension.menu.setMenuConfig({
          nodeMenu: [
            { text: '删除', callback: (node) => this.lf.deleteNode(node.id) },
            { text: '复制节点', callback: (node) => this.lf.cloneNode(node.id) },
          ], // 覆盖默认的节点右键菜单
        })
      }
      // console.log("🚀 ~ obj:", logicFlowInst);
      this.$_registerNode()
    },
    // 自定义
    $_registerNode() {
      // registerNodes(this.lf, this.nodesList)
      this.nodesArr.forEach((i) => {
        registerNodes(this.lf, i.nodesList)
      })
      FlowLink(this.lf)
      this.$_LfEvent()

      // this.$render()
    },
    $render(data = {}, cb) {
      this.$_initLf()
      // this.lf.render(mockData0)
      data.edges = data.edges.reduce((a, c) => (c.properties.isSelected ? a.push(c) : a.unshift(c), a), [])
      this.lf.render(data)
      cb && cb(this.lf)
    },

    $_LfEvent() {
      this.lf.on('node:click', ({ data }) => {
        this.clickNode = data
        // this.dialogVisible = true;
      })
      this.lf.on('element:click', () => {
        this.hideAddPanel()
      })
      this.lf.on('node:dnd-add', ({ data }) => {
        this.$emit('node-add', data)
      })
      this.lf.on('edge:add', ({ data }) => {
        console.log('edge:add', data)
      })
      this.lf.on('node:mousemove', ({ data }) => {
        this.moveData = data
      })
      this.lf.on('node:mousedown', ({ e, data }) => {
        e.preventDefault() // 阻止默认 防止拖拽时候节点选中
      })
      this.lf.on('blank:click', () => {
        this.hideAddPanel()
      })
      this.lf.on('connection:not-allowed', (data) => {
        this.$message({ type: 'error', message: data.msg })
      })
    },
    hideAddPanel() {
      this.showAddPanel = false
      this.addPanelStyle.top = 0
      this.addPanelStyle.left = 0
      this.addClickNode = null
    },
    $getGraphData(cb) {
      this.graphData = this.lf.getGraphData()
      // console.log('333', this.graphData)
      cb ? cb(this.graphData) : (this.dataVisible = true)
    },
    dragNode(item) {
      this.lf.dnd.startDrag({
        type: item.type,
        text: item.text,
        properties: { content: item.content },
      })
    },
  },
}
</script>
<style scoped lang="scss">
@import url(./style.css);
.logic-flow-view {
  // height: calc(100vh - 130px);
  height: 100%;
  min-height: 300px;
  position: relative;
  padding: 4px;
  box-shadow: 0 0 4px rgb(0 0 0 / 30%) inset;
  background: #fff;
  /* z-index: 999; */
}
::v-deep .lf-text-input {
  font-size: 12px;
  overflow: hidden;
}

.demo-control {
  position: absolute;
  // top: 50px;
  right: 50px;
  z-index: 2;
}

#LF-view {
  width: 100%;
  height: 100%;
  outline: none;
}
.add-panel {
  position: absolute;
  z-index: 11;
  background-color: white;
  padding: 10px 5px;
}
</style>
